<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/com.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mymsg.css">
</head>
<body>
  <header class="myheader">
        <div class="header_main">
            <div class="header_left">
                <a href="/">北游论坛 </a>
            </div>
            <div class="header_right">          
                <div onclick="goSend()">
                    <a href="javascript:;">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        发表
                    </a>
                </div>
                <div  id="login">
                    <a href="./login.html">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        登录
                    </a>
                </div>
                <div  id="user">
                    <a href="javascript:;">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <span id="username"></span>
                    </a>
                    <ul class="user_nav">
                        <li onclick="goUplaod()">
                            上传头像
                        </li>
                        <li>
                            我的论坛
                        </li>
                        <li onclick="goOutLogin()">
                            退出
                        </li>
                    </ul>
                </div>
                <div  class="user_photo">
                    <a href="javascript:;">
                        <img src="http://106.12.150.223:9000/header/admin.png" alt="" id="user_img">
                    </a>
                </div>
            </div>
        </div>
  </header>
  <main class="formMine">
    <div class="left">
        <img src="" alt="" id="user_img">
        <h2 id="my_username"></h2>
        <span class="label label-success">共0篇</span>
    </div>
    <div class="right">

    </div>
  </main>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../js/sendAjax.js"></script>
<script src="../js/template.js"></script>
<script id="tem" type="text/html">
    {{each data as item index}}
    <div class="panel panel-danger">
        <div class="panel-heading">
            <img src="{{item.headerUrl}}" alt="" onclick="goMine('{{item.username}}')"> &nbsp; <span>{{item.username}}</span>
            &nbsp; <span>{{item.time}}</span>
        </div>
        <div class="panel-body">
            {{item.content}}
            <button type="button" class="btn btn-success pinglun">评论</button>
        </div>
    </div>
    {{/each}}
</script>
<script>
    // 向后端发送请求判断登录状态
    let isLogin = async ()=>{
        let res = await sendAjax("/isLogin","get");
        console.log(res)
        // 已登录
        if(res.code===0){
            $("#login").hide();
            $("#username").text(res.data.username)
            $("#user").show();
            $(".user_photo").show();
            getUserPhoto();
        }else{
            $("#login").show(); 
            $("#user").hide();
            $(".user_photo").hide();
        }
    }
     // 获取用户头像信息
     async function getUserPhoto(){
        let res = await sendAjax("/userPhoto","get");
        console.log(res)
        if(res.code===0){
            $("#user_img").attr("src",res.url)
        }else{
            alert(res.msg)
        }
    }
    isLogin();
    // 退出登录
    async function goOutLogin(){
        let res = await sendAjax("/outLogin","get");
        console.log(res)
        isLogin();
    }
    function goUplaod(){
        window.location.href = './upload.html'
    }
    // 去发表
    async function goSend(){
        // 判断当前用户是否已登录
        let res = await sendAjax("/isLogin","get");
        if(res.code===0){
            window.location.href = './send.html'
        }else{
            window.location.href = './login.html'
        }
    }
   

    //  获取页面传递的参数(用户名)
    let username = location.search.split("=")[1];
    // 将汉字解码
    username =decodeURI(username)
    console.log(username)
    $("#my_username").text(username)
    // 获取当前论坛作者头像
    async function getUserImg(){
        let res = await sendAjax("/user/phpto","get",{username:username});
        console.log(res)
        $(".left img").attr("src",res.url)
    }
    getUserImg();
    // 获取当前用户论坛列表
    async function getList(){
        let res = await sendAjax(`/get/username/msgList?username=${username}`,"get")
        console.log(res)
        $(".label-success").text(`共${res.data.length}篇`)
        if(res.data.length ===0){
            let p = "<p class='nodata'>暂无数据~~~</p>"
            $(".right").html(p)
            return
        }
        let html = template("tem",{data:res.data})
        $(".right").html(html)
    }
    getList();
</script>
</html>